React中获取DOM节点的两种方法

本节目标：理解“React中获取DOM节点的两种方法”的核心思路，并能把它用于实际开发或面试表达。 React提供的获取DOM元素的方法有两种，一是react-dom中的findDOMNode()，二是refs。 1、

findDOMNode
findDOMNode

通常用于React组件的引用，其语法如下：

import ReactDOM from 'react-dom';ReactDOM.findDOMNode(ReactComponent);

当组件被渲染到DOM中后，findDOMNode会返回该组件实例对应的DOM节点。 示例：

componentDidMount(){    const dom = ReactDOM.findDOMNode(this);    // this

为当前组件的实例

}
render() {}

注：如果render()中返回null，那么findDOMNode()也返回null。 findDOMNode只对已经挂载的组件有效。 2、

refs
refs

多用于React组件内子组件的引用。使用ref获取DOM节点有两种情况： （1）子组件为原生DOM组件：获取到的就是这个DOM节点。如下例，this.input就获取到了当前\<input /\>节点。

<input ref={(ref)=>{this.myInput = ref}} />

通过this.myInput，我就可以对\<input /\>进行一系列操作，比如让输入框聚焦：

this.myInput.focus();

注：refs也支持字符串格式：

<input ref='myInput' />

通过this.refs.myInput获取到节点。 （2）子组件为React组件，比如\<MyInput/\>：获得的就是\<MyInput/\>的实例，因此就可以调用\<MyInput/\>的实例方法。 示例：

componentDidMount(){    const myComp = this.refs.myComp;  //

获取到的是\<Comp /\>的实例

myComp    const dom = ReactDOM.findDOMNode(myComp);  //

获取到实例对应的DOM节点

}
render(){    return (        <div>            <Comp ref='myComp' />        </div>    );}

注：调用\<Comp /\>实例方法的方式：this.refs.myComp.method()，但并不建议这种调用方式。 > 来自

 <https://www.jianshu.com/p/f533a9d7645c>